<template>
	<view class="content">
		
		<view class="topContent">
			{{info.userName}}
		</view>
		<view class="mainContent">
			
			<view class="avatarContent">
				<view class="avatars" @tap="chooseImg">
					<image :src="info.avatar" class="avatar"></image>
					<image src="@/static/mine/group.png" class="phone"></image>
				</view>
			</view>
			
			<view class="mainTitle" @tap="editName">用户名</view>
			<view  class="mainTitles" @tap="editName">{{info.userName}}</view>
			
			<view class="mainTitle">真实姓名</view>
			<view  class="mainTitles">{{info.realName || '--'}}</view>
			
			<view class="mainTitle">手机号</view>
			<view  class="mainTitles">{{info.phone}}</view>
			
			
			
		</view>
		
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import { personalData,updateUser } from '../../api/api.js'
	export default {
		data() {
			return {
				info:''
			}
		},
		onShow() {
			// 获取个人资料
			this.getInfo()
		},
		methods: {
			// 获取个人资料
			getInfo() {
				let data = {}
				personalData(data).then( res=> {
					this.info = res.data
				})
			},
			// 点击修改昵称
			editName() {
				uni.navigateTo({
					url:'./modifyNickname?userName=' + this.info.userName
				})
			},
			// 点击上传凭证
			chooseImg() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: res => {
						uni.uploadFile({
							url:store.state.baseUrl + '/api/common/uploadBatch',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success:res=> {
								let path = JSON.parse(res.data);
								let data = {
									avatar:path.data[0].url
								}
								updateUser(data).then( res=> {
									uni.showToast({
										icon:'none',
										title:'修改成功'
									})
									that.getInfo()
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: rgba(246, 246, 247, 1);
	}
</style>
<style lang="less">
  .content {
	  
	  .topContent {
		  border-radius: 20rpx 20rpx 0 0;
		  width: 750rpx;
		  height: 96rpx;
		  text-align: center;
		  background: #FFFFFF;
		  box-shadow: inset 0rpx -2rpx 2rpx 0px rgba(199,199,199,0.25);
		  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		  font-weight: bold;
		  font-size: 32rpx;
		  color: #3C3C3C;
		  line-height: 96rpx;
		  margin-top: 20rpx;
	  }
	  
	  .mainContent {
		  background-color: #fff;
		  
		  .avatarContent {
			  width: 100%;
			  height: 254rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  
			  .avatars {
				  position: relative;
				  width: 160rpx;
				  height: 160rpx;
				  
				  .avatar {
					  width: 160rpx;
					  height: 160rpx;
					  border-radius: 50%;
				  }
				  
				  .phone {
					  position: absolute;
					  bottom: 0;
					  right: 0;
					  width: 62rpx;
					  height: 62rpx;
				  }
			  }
		  }
		  
		  .mainTitle {
			  margin-left: 48rpx;
			  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			  font-weight: 400;
			  font-size: 28rpx;
			  color: #000000;
			  line-height: 36rpx;
			  margin-bottom: 40rpx;
		  }
		  
		  .mainTitles {
			  margin-bottom: 40rpx;
			  margin-left: 48rpx;
			  font-family: PingFang SC, PingFang SC;
			  font-weight: 500;
			  font-size: 28rpx;
			  color: #3C3C3C;
			  line-height: 24rpx;
			  padding-bottom: 16rpx;
			  width: 670rpx;
			  border-bottom: solid rgba(249, 249, 249, 1) 1rpx;
		  }
	  }
	  
		.avautrContent {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 214rpx;
			border-bottom: solid 10rpx #FAFAFA;
			.title {
				margin-left: 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
			}
			.rightContent {
				display: flex;
				align-items: center;
				margin-right: 34rpx;
				.auator {
					margin-right: 28rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.rightImg {
					width: 12rpx;
					height: 20rpx;
				}
			}
		}
		.listContent {
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 690rpx;
			height: 125rpx;
			border-bottom: 1rpx solid #F2F2F2;
			.leftContent {
				display: flex;
				align-items: center;
				.title {
					margin-right: 57rpx;
					width: 120rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
				}
				.name {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}
			}
			.rightImg {
				width: 12rpx;
				height: 20rpx;
			}
			.change {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFD000;
				line-height: 40rpx;
			}
		}
	}
</style>
